import React, { PureComponent } from 'react';
import classnames from 'classnames';
import { Link } from 'react-router-dom';
import './index.less';

class AddressList extends PureComponent {

  handleClose = (e) => {
    e.stopPropagation()
    const { addressHide } = this.props;
    addressHide()
  }

  render() {
    const { show, addresslist } = this.props;
    const showSty = classnames({
      'address-list-content': true,
      'animate-slide-right-down':!show,
      'animate-slide-right-up':show,
    })
    const hidebox = classnames({
      'address-list':true,
      'hide':!show,
    })
    return (
      <div className={hidebox}>
        <div className="address-list-mask" onClick={this.handleClose} />
        <div className={showSty}>
          <div className="address-list-head">
            <span onClick={this.handleClose}>&lt;</span>
            <span>配送至</span>
          </div>
          <div className="address-title address-use">地址列表</div>

          {
            addresslist.map((item, index) => {
              const { province, city, county, address } = item;
              const addressString = `${province}${city}${county}${address}`;
              item.addressString = addressString;
              return (
                <div
                  key={index}
                  className="address-list-item"
                  onClick={()=> { this.props.onSelectAddress(item) }}
                >
                  <div>{addressString}</div>
                </div>
              )
            })
          }

          <div className="address-title"> <Link to='/addressForm'>添加新地址</Link></div>
        </div>
      </div>
    );
  }
}

export default AddressList;


